<template>
  <a-modal
    title="添加用户"
    :visible="visible"
    :destroyOnClose="true"
    @ok="cancel"
    @cancel="cancel"
    :width="800"
  >
    <a-table
      :columns="columns"
      :data-source="dataSource"
      rowKey="id"
      :pagination="false"
      style="height: 300px; margin-top: 20px"
      :scroll="{ y: 200 }"
    >
      <div slot="action" slot-scope="text, record">
        <a @click="addUser(record)" style="margin-right: 8px"> 选择 </a>
      </div>
    </a-table>
    <div class="pagination">
      <a-pagination
        :defaultPageSize="pagination.pageSize"
        :current="pagination.current"
        show-quick-jumper
        :total="pagination.total"
        show-less-items
        @change="onPageChange"
      />
    </div>
  </a-modal>
</template>
<script>
import { getNotRoleMenber, removeRoleUser, addRoleUser } from '@/api/role';
const columns = [
  {
    title: '账号',
    dataIndex: 'userId',
    align: 'center',
  },
  {
    title: '昵称',
    dataIndex: 'userName',
    align: 'center',
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    align: 'center',
  },
];
export default {
  name: 'department',
  components: {},
  props: {
    visible: Boolean,
    cancel: Function,
    roleId: String,
  },
  data() {
    return {
      dataSource: [],
      columns,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      parames: {},
      userVisible: true,
    };
  },
  created() {
    this.getData();
  },
  computed: {},
  methods: {
    getData() {
      let request = { ...this.parames };
      request.id = this.roleId;
      request.currentPage = this.pagination.current;
      request.pageSize = this.pagination.pageSize;
      getNotRoleMenber(request).then((response) => {
        this.dataSource = response.data.list;
        this.pagination.total = response.data.count;
      });
    },
    onPageChange(page, pageSize) {
      this.pagination.current = page;
      this.pagination.pageSize = pageSize;
      this.getData();
    },
    addUser(record) {
      addRoleUser({
        id: this.roleId,
        key: [record.id],
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.cancel();
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pagination {
  height: 30px;
  line-height: 30px;
  width: 100%;
  text-align: right;
}
</style>
